<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<el-tabs v-model="tabIndex" @tab-click="handleClick">
		    <el-tab-pane :label="item.name" 
			v-for="(item, index) in tabbars" :key="index">
				
			</el-tab-pane>
		</el-tabs>
		
		<button-search placeholder="要搜索的订单编号"
		@search="searchEvent"
		ref="buttonSearch">
			<template #left>
				<el-button type="success" size="mini"
				@click="exportModel = true">导出订单</el-button>
				<el-button type="danger" size="mini"
				@click="deleteAll">批量删除</el-button>
			</template>
			<!-- 高级搜索表单 -->
			<template #form>
				<el-form inline ref="form" :model="form" label-width="80px">
					<el-form-item label="订单编号" class="mb-0">
						<el-input v-model="form.no" placeholder="订单编号" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="下单时间" class="mb-0">
						<el-date-picker
						size="small"
						v-model="form.time"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					
					<el-form-item label="收货人" class="mb-0">
						<el-input v-model="form.name" placeholder="收货人" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="手机号" class="mb-0">
						<el-input v-model="form.phone" placeholder="手机号" size="mini"></el-input>
					</el-form-item>
					<el-form-item class="mb-0">
						<el-button class="ml-2" type="info" size="mini" @click="searchEvent">搜索</el-button>
						<el-button type="info" size="mini" @click="clearSearch">清空筛选条件</el-button>
					</el-form-item>
				</el-form>
			</template>
		</button-search>
		<!-- 商品列表 -->
		<el-table border
		class="mt-3"
		:data="tableData"
		style="width: 100%"
		@selection-change="handleSelectionChange">
		  <el-table-column
			type="selection"
			width="45"
			align="center">
			</el-table-column>
		  <el-table-column label="商品信息" width="330">
			<template slot-scope="scope">
				<div >
					<div style="display: flex;flex-direction: row;">
						<p class="mb-1">订单编号:</p>
						<small class="ml-1">{{scope.row.no}}</small>
					</div>
					<div style="display: flex;flex-direction: row;">
						<p class="mb-1">下单时间:</p>
						<small class="ml-1">{{scope.row.create_time}}</small>
					</div>
				</div>
				<div class="media border-top py-2" v-for="(item, index) in scope.row.order_items"
				:key="index">
					<img class="mr-2" :src="item.goods_item.cover" style="width: 60px;" scope="widthFix"/>
					<div class="media-body">
						<a class="text-primary">{{item.goods_item.title}}</a>
					</div>
				</div>
			</template>
		  </el-table-column>
		  <el-table-column label="实付款" align="center" width="130">
			  <template slot-scope="scope">
				  <span>¥{{scope.row.total_price}}</span>
				  <p><small>(含运费：¥0.00)</small></p>
			  </template>
		  </el-table-column>
		  <el-table-column align="center" prop="sale_count" label="买家" width="120">
			  <template slot-scope="scope">
				  <span>{{scope.row.user.username}}</span>
				  <p><small>(用户ID：{{scope.row.user.id}})</small></p>
			  </template>
		  </el-table-column>
		<el-table-column prop="order" label="支付方式" align="center">
			<template slot-scope="scope">
				<span class="badge badge-success"
				v-if="scope.row.payment_method === 'wechat'">微信</span>
				<span class="badge badge-primary"
				v-else-if="scope.row.payment_method === 'alipay'">支付宝</span>
				<span class="badge badge-secondary"
				v-else>未支付</span>
			</template>
		</el-table-column>
		<el-table-column  label="配送方式" >
			<template slot-scope="scope">
				<div v-if="scope.row.ship_data">
					<div class="border-bottom">
						<span class="badge badge-light">公司:</span>
						{{scope.row.ship_data.express_company}}
					</div>
					<div>
						<span class="badge badge-light">单号:</span>
						{{scope.row.ship_data.express_no}}
					</div>
				</div>
				<span class="badge badge-secondary"
				v-else>未配送</span>
			</template>
		</el-table-column>
		<el-table-column label="交易状态" width="130">
			<template slot-scope="scope">
				<div >
					付款状态:<span class="badge "
					:class="scope.row.payment_method ? 'badge-success' : 'badge-secondary'">
						{{scope.row.payment_method ? '已付款' : '未付款'}}
					</span>
				</div>
				<div>
					发货状态:
					<span class="badge "
					:class="scope.row.ship_data ? 'badge-success' : 'badge-secondary'">
						{{scope.row.ship_data ? '已发货' : '待发货'}}
					</span>
				</div>
				<div>
					收货状态:
					<span class="badge "
					:class="scope.row.ship_status === 'reveived' ? 'badge-success' : 'badge-secondary'">
						{{scope.row.ship_status === 'reveived' ? '已收货' : '待收货'}}
					</span>
				</div>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="150" align="center">
			<template slot-scope="scope">
				<el-button type="text" size="small"  >订单详情</el-button>
				<el-button type="text" size="small" 
				@click="ship(scope.row)"
				v-if="scope.row.ship_status === 'pending' && scope.row.closed === 0 && scope.row.payment_method && scope.row.refund_status === 'pending'"
				>订单发货</el-button>
			</template>
		</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white"
		style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>
		
		<!-- 订单发货弹出层 -->
		<el-dialog title="订单发货" :visible.sync="shipModel">
			<el-form  :model="shipForm" label-width="80px">
				<el-form-item label="快递公司" prop="express_company">
					<el-select v-model="shipForm.express_company" placeholder="请选择">
						<el-option :label="item.name" :value="item.name"
						v-for="(item, index) in express_company_options" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="快递单号" prop="express_no">
					<el-input type="text" v-model="shipForm.express_no" placeholder="请输入快递单号"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="shipModel = false">取 消</el-button>
				<el-button type="primary" @click="shipSubmit">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 订单导出excel弹出层 -->
		<el-dialog title="订单导出Excel" :visible.sync="exportModel">
			<el-form  :model="exportForm" label-width="80px">
				<el-form-item label="订单类型" prop="tab">
					<el-select v-model="exportForm.tab" placeholder="请选择订单类型">
						<el-option :label="item.name" :value="item.key"
						v-for="(item, index) in tabbars" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="时间范围" >
					<el-date-picker
					size="small"
					v-model="exportForm.time"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="exportModel = false">取 消</el-button>
				<el-button type="primary" @click="exportExcel">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import buttonSearch from "@/components/common/button-search.vue"
import common from "@/common/mixins/common.js";
	
export default {
	mixins:[common],
	inject:['layout'],
	
	components: {
		buttonSearch,
	},
	
	created() {
		this.axios.get('/admin/express_company/1?limit=50',{token: true})
			.then(res => {
				let data = res.data.data
				this.express_company_options = data.list
			})
			.catch(err => {
				
			})
	},
	
	data() {
		return {
			//export
			exportModel: false,
			exportForm: {
				tab: '',
				time: ''
			},
			
			//发货订单号
			shipId: 0,
			
			//快递公司数组
			express_company_options: [],
			
			//shipForm
			shipForm: {
				express_company: '',
				express_no: ''
			},
			
			//订单发货model是否显示
			shipModel: false,
			
			preUrl: 'order',
			tabIndex: 0,
			tabbars: [
				{name:"全部", key: 'all'},
				{name:"待付款", key: 'nopay'},
				{name:"待发货", key: 'noship'},
				{name:"待收货", key: 'shiped'},
				{name:"已收货", key: 'received'},
				{name:"已完成", key: 'finish'},
				{name:"已关闭", key: 'closed'},
				{name:"退款中", key: 'refunding'},
			],
			form: {
				no: '',
				time: '',
				name: '',
				phone: '',
			},
			superSearch: false,
			tableData: [],
			
			//当前页
			currentPage: 1,
		}
	},
	
	computed: {
		tab() {
			return this.tabbars[this.tabIndex].key
		},
		params() {
			let str  = ''
			for (let key in this.form) {
				let val = this.form[key]
				if(val){
					if(Array.isArray(val)) {
						str += `&starttime=${val[0]}`
						str += `&endtime=${val[1]}`
					} else {
						str += `&${key}=${val}`
					}
				}
			}
			return str
		}
	},
	
	methods: {
		//导出数据
		exportExcel() {
			if(!this.exportForm.tab) {
				return this.$message({
					message: '订单类型不能为空',
					type: 'error'
				});
			}
			let url = `/admin/order/excelexport?tab=${this.exportForm.tab}`
			let time  = this.exportForm.time
			if (time && Array.isArray(time)) {
				url += `&starttime=${time[0]}`
				url += `&endtime=${time[1]}`
			} 
			this.layout.showLoading()
			this.axios.post(url, {}, {token: true, responseType: 'blob'})
				.then(res=>{
					this.exportModel = false
					if(res.status == 200) {
						let url = window.URL.createObjectURL(new Blob([res.data]))
						let link = document.createElement('a')
						link.style.display = 'none'
						link.href = url
						let filename = new Date().getTime() + '.xlsx'
						link.setAttribute('download', filename)
						document.body.appendChild(link)
						link.click()
					}
					this.layout.hideLoading()
				}).catch(err=> {
					this.layout.hideLoading()
					this.$message({
						message: '下载失败',
						type: 'error'
					});
				})
		},
		//确认发货
		shipSubmit(item) {
			this.layout.showLoading()
			this.axios.post('/admin/order/' + this.shipId + '/ship', this.shipForm, {
				token: true
			}).then(res => {
				this.shipModel = false
				this.getList()
				this.layout.hideLoading()
				this.$message({
					message: '发货成功',
					type: 'success'
				})
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		
		//发货
		ship(item) {
			this.shipId = item.id
			this.shipModel = true
		},
		
		//getListUrl
		getListUrl() {
			return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}&tab=${this.tab}${this.params}`
		},
		
		//重写获取列表结果
		getListResult(e) {
			this.tableData = e.list
		},
		
		//分页方法
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
		},

		handleClick(tab, event) {
			this.getList()
		},
		//清空搜索条件
		clearSearch() {
			this.form = {
				no: '',
				time: '',
				username: '',
				phone: '',
			}
		},
		//搜索事件
		searchEvent(e = false) {
			if (typeof e === 'string') {
				this.form.no = e
				this.getList()
				return console.log('简单搜索事件',e)
			} 
			this.getList()
		},
		
	}
}
</script>

<style>
</style>
